// src/lib/scroll-animation.js
import gsap from 'gsap'

// 更新模型/相机的函数
export const scrollAnimation = (position, target, isMobile, onUpdate) => {
    const tl = gsap.timeline()

    // part1

    // 操作相机
    tl.to(position, {
        x: !isMobile ? -3.38 : -7.0,
        y: !isMobile ? -10.74 : -12.2,
        z: !isMobile ? -5.93 : -6.0,
        scrollTrigger: {
            // .sound-section的dom元素触发该动画
            trigger: '.sound-section',
            start: 'top bottom',
            end: 'top top',
            scrub: 2,
            immediateRender: false
        },
        onUpdate
    })

    // 相机的target -> model
    tl.to(target, {
        x: !isMobile ? 1.52 : 0.7,
        y: !isMobile ? 0.77 : 1.9,
        z: !isMobile ? -1.08 : 0.7,
        scrollTrigger: {
            // .sound-section的dom元素触发该动画
            trigger: '.sound-section',
            start: 'top bottom',
            end: 'top top',
            scrub: 2,
            immediateRender: false
        },
    })

    // 操作该类对应的dom, 因为3d模型变换位置的时候被遮住了
    // 需要让这个元素变透明
    tl.to('.jumbotron-section', {
        opacity: 0,
        scrollTrigger: {
            // .sound-section的dom元素触发该动画
            trigger: '.sound-section',
            start: 'top bottom',
            end: 'top top',
            scrub: 2,
            immediateRender: false
        },
    })

    // 让该元素淡入
    tl.to('.sound-section-content', {
        opacity: 1, // 记得元素的原始css-opacity设为0
        scrollTrigger: {
            // .sound-section的dom元素触发该动画
            trigger: '.sound-section',
            start: 'top bottom',
            end: 'top top',
            scrub: 2,
            immediateRender: false
        },
    })

    // part 2

    // 操作相机
    tl.to(position, {
        x: !isMobile ? 1.56 : 9.36,
        y: !isMobile ? 5.0 : 10.95,
        z: !isMobile ? 0.01 : 0.09,
        scrollTrigger: {
            // .display-section的dom元素触发该动画
            trigger: '.display-section',
            start: 'top bottom',
            end: 'top top',
            scrub: 2,
            immediateRender: false
        },
        onUpdate
    })

    // 相机的target -> model
    tl.to(target, {
        x: !isMobile ? -0.55 : -1.62,
        y: !isMobile ? 0.32 : 0.02,
        z: !isMobile ? 0.0 : -0.06,
        scrollTrigger: {
            // .display-section的dom元素触发该动画
            trigger: '.display-section',
            start: 'top bottom',
            end: 'top top',
            scrub: 2,
            immediateRender: false
        },
    })

    tl.to('.display-section', {
        opacity: 1,
        scrollTrigger: {
            // .sound-section的dom元素触发该动画
            trigger: '.display-section',
            start: 'top bottom',
            end: 'top top',
            scrub: 2,
            immediateRender: false
        },
    })
}